<template>
  <div class="wechat-teacher-container">
    <el-row :gutter="20" style="width: 100%; height: 100%">
      <el-col :span="4" :xs="24">
        <p class="head-container">机构角色</p>
        <div class="head-container">
          <el-tree
            :data="deptOptions"
            :props="{ label: 'roleName', children: 'children' }"
            :expand-on-click-node="true"
            :current-node-key="currentDeptKey"
            ref="deptTreeRef"
            node-key="roleId"
            highlight-current
            default-expand-all
            @node-click="handleNodeClick"
          />
        </div>
      </el-col>
      <el-col :span="20" :xs="24">
        <div class="wechat-teacher-box">
          <el-card class="wechat-teacher-data">
            <template #header>
              <div class="card-header">
                <div style="font-size: 18px; margin-bottom: 10px">功能权限</div>
                <div style="font-size: 14px; color: #666; margin-bottom: 10px">
                  决定角色可以看到哪些页面或使用哪些操作
                </div>
              </div>
            </template>
            <el-scrollbar style="height: 700px">
              <div class="teacher-tree-box">
                <div
                  style="
                    width: 100%;
                    height: 100%;
                    display: flex;
                    flex-wrap: wrap;
                  "
                >
                  <el-tree
                    v-for="(k, i) in menuTrees"
                    :key="k.menuId"
                    :data="[k]"
                    :props="{ label: 'title', children: 'children' }"
                    ref="deptMenuTreeRef"
                    node-key="menuId"
                    show-checkbox
                    highlight-current
                    default-expand-all
                    style="overflow-y: auto; width: 500px; margin-bottom: 20px"
                    @node-click="handleMenuNodeClick"
                    @check-change="handleMenuCheckChange"
                  >
                  </el-tree>
                </div>
              </div>
            </el-scrollbar>
          </el-card>
          <div class="wechat-teacher-confirm">
            <el-button type="primary" size="large" @click="confirmMenu"
              >保存</el-button
            >
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script setup name="WechatTeacher">
import { nextTick, ref, reactive, onMounted } from "vue";
import {
  getSelectRoleOrgApi,
  getTeacherTreeApi,
  editRoleMenuApi,
  getTeacherMenuInfoApi,
} from "@/api/system/wechatTeacher";
const { proxy } = getCurrentInstance();
const deptOptions = ref(undefined);
// 默认选中
const currentDeptKey = ref("");
// 菜单树
const menuTrees = ref(undefined);

// 获取左侧机构角色
const getRoleOrgList = () => {
  getSelectRoleOrgApi().then((res) => {
    const trees = [];
    for (let key in res.data) {
      let obj = {
        roleId: "1",
        roleName: key,
        disabled: true,
        children: res.data[key],
      };
      trees.push(obj);
    }
    deptOptions.value = trees;
    nextTick(() => {
      currentDeptKey.value =
        deptOptions.value &&
        deptOptions.value[0].children &&
        deptOptions.value[0].children[0].roleId;
      console.log("de: ", currentDeptKey.value);
      getTeacherMenuInfos();
      // proxy.$refs.deptTreeRef.setCurrentKey(currentDeptKey.value);
    });
  });
};

// 左侧树节点单击事件
const handleNodeClick = (val) => {
  if (val.roleId == "1") {
    return;
  }
  console.log("sss");
  currentDeptKey.value = val.roleId;
  getTeacherMenuInfos();
};

// 获取角色对应的菜单树
const getTeacherMenuInfos = () => {
  console.log("getTeacherMenuInfos: ", currentDeptKey.value);
  getTeacherMenuInfoApi({ roleId: currentDeptKey.value }).then((res) => {
    menuTrees.value.forEach((item, index) => {
      proxy.$refs.deptMenuTreeRef[index].setCheckedKeys(res.data);
    });
  });
};

// 获取右侧菜单树
const getTeacherTrees = () => {
  getTeacherTreeApi().then((res) => {
    let arr = [];
    res.data.forEach((item) => {
      arr.push(...item.children);
    });
    menuTrees.value = arr;
  });
};

const handleMenuNodeClick = (val) => {
  // console.log("handleMenuNodeClick: ", val);
};

const handleMenuCheckChange = (val) => {
  // console.log("handleMenuCheckChange: ", val);
};

// 保存
const confirmMenu = () => {
  let array = [];
  menuTrees.value.forEach((item, index) => {
    // 菜单全选中节点
    const arr = proxy.$refs.deptMenuTreeRef[index].getCheckedKeys();
    // 半选中的菜单节点
    let halfarr = proxy.$refs.deptMenuTreeRef[index].getHalfCheckedKeys();

    array.push(...arr, ...halfarr);
  });
  editRoleMenuApi({ roleId: currentDeptKey.value, menuIds: array }).then(
    (res) => {
      console.log("res: ", res);
      proxy.$modal.msgSuccess(res.msg);
    }
  );
};

// 初始化请求
onMounted(async () => {
  // 获取左侧机构角色树
  await getRoleOrgList();
  // 获取右侧菜单树
  await getTeacherTrees();
  // await getTeacherMenuInfos();
});
</script>
<style lang="scss" scoped>
.wechat-teacher-container {
  width: 100%;
  height: 100%;
}
.wechat-teacher-box {
  width: 100%;
  height: 100%;
  .wechat-teacher-data {
    width: 100%;
    height: calc(100% - 70px);
    overflow: hidden;
    .teacher-tree-box {
      width: 100%;
      height: 100%;
      overflow: hidden;
      overflow-y: auto;
    }
  }
}

.wechat-teacher-confirm {
  width: 100%;
  height: 50px;
  padding: 10px 0;
  box-sizing: border-box;
  text-align: right;
}
</style>